<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml">
	<ui:define name="title">ajaxSupport</ui:define>
	<ui:define name="header">ajaxSupport组件示例</ui:define>
	<ui:define name="content">
		<!--  
		1.能够关联(eventButton)到一般按钮,如 <input type="button" value="button" />
		2.能够关到(eventButton)到JSF button, 如 h:commandButton
		3.在 h:form 下不能存在问题
		4.能够将result设置到一般html控件，如：input, div, span 等
		5.能够将result设置到JSF控件，如 h:input, h:commandButton, h:select...
		6.能够引用ref到一般html控件
		
		 -->

				<h:panelGrid columns="2" border="1">
					<h:inputText id="name" value="huliqing" />
					<h:inputText id="email" value="huliqing@live.com" />
				</h:panelGrid><p />
				
		<h:form>
				<!-- button1 -->
				
				<input id="button1" type="button" value="Button1 - ref name, email" /><p />
				<q:ajaxSupport id="objId1" 
					ref="name, email" 
					listener="#{ajaxSupportBean.listener}"
					eventButton="button1"
					onStart="Q.F.loading();" 
					onFinish="Q.F.loading(false);
							alert(Q.F.find('objId1').result);">
				</q:ajaxSupport><p />
				
				<!-- button3 -->
				
				<div id="divObj" /><p />
				<span id="spanObj" /><p />
				<input id="inputObj" type="text" size="20" /><p />
				<input id="buttonObj" type="button" /><p />
				<input id="button3" type="button" value="Button3 - ref name and for divObj,spanObj,inputObj, buttonObj" /><p />
				<q:ajaxSupport id="objId3" 
					ref="name" 
					for="divObj,spanObj,inputObj,buttonObj"
					listener="#{ajaxSupportBean.listener}"
					eventButton="button3"
					onStart="Q.F.loading(true);" 
					onFinish="Q.F.loading(false);">
				</q:ajaxSupport><p />
				
				<!-- button4 -->
				
				<h:panelGroup id="divObjJSF" layout="block" /><p />
				<h:inputText id="inputObjJSF" /><p />
				<h:commandButton id="buttonObjJSF" /><p />
				<input id="button4" type="button" value="Button4 - ref name and for divObjJSF,inputObjJSF, buttonObjJSF" /><p />
				<q:ajaxSupport id="objId4" 
					ref="name" 
					for="divObjJSF,inputObjJSF,buttonObjJSF"
					listener="#{ajaxSupportBean.listener}"
					eventButton="button4"
					onStart="Q.F.loading(true);" 
					onFinish="Q.F.loading(false);">
				</q:ajaxSupport><p />
				
				<!-- button6 -->
				
				<h:panelGroup id="button6DivObjJSF" layout="block" /><p />
				
				<div id="button6" > Button6 - ref name and for button6DivObjJSF</div>
				<q:ajaxSupport id="objId6" 
					ref="name" 
					for="button6DivObjJSF"
					listener="#{ajaxSupportBean.listener}"
					eventButton="button6"
					onStart="Q.F.loading(true);" 
					onFinish="Q.F.loading(false);">
				</q:ajaxSupport><p />
		</h:form>
		
				<!-- button2 -->
				
				<h:commandButton id="button2" value="Button2 - ref name" /><p />
				<q:ajaxSupport id="objId2" 
					ref="name" 
					listener="#{ajaxSupportBean.listener}"
					eventButton="button2"
					onStart="Q.F.loading(true);" 
					onFinish="Q.F.loading(false);
						alert(QFaces.Faces.Finder.find('objId2').result);">
				</q:ajaxSupport><p />
				
				<!-- button5 -->
				
				<h:panelGroup id="divObjJSF2" layout="block" /><p />
				<h:inputText id="inputObjJSF2" /><p />
				<h:commandButton id="buttonObjJSF2" /><p />
				<h:commandButton id="button5" value="Button5 - ref name and for divObjJSF2,inputObjJSF2, buttonObjJSF2" /><p />
				<q:ajaxSupport id="objId5" 
					ref="name" 
					for="divObjJSF2,inputObjJSF2,buttonObjJSF2"
					listener="#{ajaxSupportBean.listener}"
					eventButton="button5"
					onStart="Q.F.loading(true);" 
					onFinish="Q.F.loading(false);">
				</q:ajaxSupport><p />
	
	</ui:define>
	
	<ui:define name="description" >
		基本的Ajax支持组件，非常实用的组件。
	</ui:define>
	<ui:define name="htmlCode" >
		<h:outputText value="#{ajaxSupportBean.htmlCode}" />
	</ui:define>
	<ui:define name="javaCode" >
		<h:outputText value="#{ajaxSupportBean.javaCode}" />
	</ui:define>
</ui:composition>